const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react"]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              // 开启模块化
              module: true,
              // 设置模块class名称： local就是类名
              // localIdentName: "[path]-[name]-[local]-[hash:base64:6]" // "[hash:base64]" 默认
              localIdentName: "[name]-[local]-[hash:base64:6]" // "[hash:base64]" 默认
            }
          }
        ],
        // 排除某些css
        exclude: [
          path.resolve(__dirname, "node_modules"),
          path.resolve(__dirname, "./src/common")
        ]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        // 包括某些css
        include: [
          path.resolve(__dirname, "node_modules"),
          path.resolve(__dirname, "./src/common")
        ]
      },
      {
        test: /\.(jpg|png|svg|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 10000
          }
        }
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: ["file-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    })
  ]
};
